import { useState } from "react";

// 父子组件通信，核心是父组件可以传递函数，子组件通过匿名函数调用，并传递子组件的值

const Son = (props) => {

  console.log(props);

  return (
    <div>
      <div>this son component {props.name}</div>
      <button onClick={() => props.onGetSonMsg("child data")}>sendMsg</button>
    </div>
  )
}

// App组件
function App() {

  const name = 'this is app name'
  const [childData, setChildData] = useState("")
  const getMsg = (msg) => {
    console.log(msg)
    setChildData(msg)
  }

  return (
    <div className="App">
      <Son onGetSonMsg={getMsg} name={name}><div>123children</div></Son>
      {childData}
    </div>
  );
}

export default App;
